<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>css 实战学习 | 小朱的网站</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/fav.ico">
    <link rel="stylesheet" href="/css/katex.min.css">
    <link rel="stylesheet" href="/css/github-markdown.min.css">
    <meta name="description" content="网页测试">
    
    <link rel="preload" href="/assets/css/0.styles.7f64417e.css" as="style"><link rel="preload" href="/assets/js/app.adf242e6.js" as="script"><link rel="preload" href="/assets/js/2.8cf67c90.js" as="script"><link rel="preload" href="/assets/js/16.131aa977.js" as="script"><link rel="prefetch" href="/assets/js/10.15f163a4.js"><link rel="prefetch" href="/assets/js/11.a27afcec.js"><link rel="prefetch" href="/assets/js/12.27eb6ae9.js"><link rel="prefetch" href="/assets/js/13.0264e853.js"><link rel="prefetch" href="/assets/js/14.0e338da5.js"><link rel="prefetch" href="/assets/js/15.18feaada.js"><link rel="prefetch" href="/assets/js/17.bc458c69.js"><link rel="prefetch" href="/assets/js/18.a943de2b.js"><link rel="prefetch" href="/assets/js/19.28b106c6.js"><link rel="prefetch" href="/assets/js/20.3b5e14bb.js"><link rel="prefetch" href="/assets/js/21.76010c7a.js"><link rel="prefetch" href="/assets/js/22.a1f4c10c.js"><link rel="prefetch" href="/assets/js/23.c62fd73c.js"><link rel="prefetch" href="/assets/js/24.29fa4cff.js"><link rel="prefetch" href="/assets/js/25.d0caf08f.js"><link rel="prefetch" href="/assets/js/26.fcbe8a2e.js"><link rel="prefetch" href="/assets/js/27.028c550c.js"><link rel="prefetch" href="/assets/js/28.94fcec24.js"><link rel="prefetch" href="/assets/js/29.d2fd21a3.js"><link rel="prefetch" href="/assets/js/3.7b0f057b.js"><link rel="prefetch" href="/assets/js/30.e219df5c.js"><link rel="prefetch" href="/assets/js/31.26e4967d.js"><link rel="prefetch" href="/assets/js/32.dd5db7fd.js"><link rel="prefetch" href="/assets/js/33.541725d2.js"><link rel="prefetch" href="/assets/js/34.7269715f.js"><link rel="prefetch" href="/assets/js/35.19b86b0e.js"><link rel="prefetch" href="/assets/js/36.240ce0fb.js"><link rel="prefetch" href="/assets/js/37.3b5e2f37.js"><link rel="prefetch" href="/assets/js/4.60158cd1.js"><link rel="prefetch" href="/assets/js/5.6154fd2f.js"><link rel="prefetch" href="/assets/js/6.d914717c.js"><link rel="prefetch" href="/assets/js/7.e50321c3.js"><link rel="prefetch" href="/assets/js/8.50a0932a.js"><link rel="prefetch" href="/assets/js/9.5e7ea4bd.js">
    <link rel="stylesheet" href="/assets/css/0.styles.7f64417e.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">小朱的网站</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://datav.aliyuncs.com/share/c5fe85f805b0425186d01be47dc34322" target="_blank" rel="noopener noreferrer" class="nav-link external">
  数据可视化实践
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/front-end/" class="nav-link router-link-active">
  前端技术小结
</a></div><div class="nav-item"><a href="/office/" class="nav-link">
  高效办公方法
</a></div><div class="nav-item"><a href="/general/" class="nav-link">
  通用知识速查
</a></div><div class="nav-item"><a href="/CPC/" class="nav-link">
  政治教育学习
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="⭐️资源" class="dropdown-title"><span class="title">⭐️资源</span> <span class="arrow down"></span></button> <button type="button" aria-label="⭐️资源" class="mobile-dropdown-title"><span class="title">⭐️资源</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://echarts.apache.org/examples/zh/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts示例
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://report.anji-plus.com/report-doc/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  AJ-Report
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://help.aliyun.com/document_detail/86874.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云DataV
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/all-about-git" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云Git大全
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.dedao.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  得到APP网页版
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://edu.dji.com/hub/docs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  大疆教育平台
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://datav.aliyuncs.com/share/c5fe85f805b0425186d01be47dc34322" target="_blank" rel="noopener noreferrer" class="nav-link external">
  数据可视化实践
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/front-end/" class="nav-link router-link-active">
  前端技术小结
</a></div><div class="nav-item"><a href="/office/" class="nav-link">
  高效办公方法
</a></div><div class="nav-item"><a href="/general/" class="nav-link">
  通用知识速查
</a></div><div class="nav-item"><a href="/CPC/" class="nav-link">
  政治教育学习
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="⭐️资源" class="dropdown-title"><span class="title">⭐️资源</span> <span class="arrow down"></span></button> <button type="button" aria-label="⭐️资源" class="mobile-dropdown-title"><span class="title">⭐️资源</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://echarts.apache.org/examples/zh/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts示例
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://report.anji-plus.com/report-doc/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  AJ-Report
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://help.aliyun.com/document_detail/86874.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云DataV
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/all-about-git" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云Git大全
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.dedao.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  得到APP网页版
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://edu.dji.com/hub/docs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  大疆教育平台
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/front-end/javascript.html" class="sidebar-link">Javascript/ECMAScript 相关技术</a></li><li><a href="/front-end/pattern.html" class="sidebar-link">前端设计模式</a></li><li><a href="/front-end/typescript.html" class="sidebar-link">学习 Typescript 实战开发</a></li><li><a href="/front-end/es6.html" class="sidebar-link">深入理解ES6</a></li><li><a href="/front-end/css.html" aria-current="page" class="active sidebar-link">css 实战学习</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/css.html#文字相关" class="sidebar-link">文字相关</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#css-布局" class="sidebar-link">css 布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/css.html#display-属性" class="sidebar-link">display 属性</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#margin-auto" class="sidebar-link">margin: auto</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#盒模型" class="sidebar-link">盒模型</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#position-属性" class="sidebar-link">position 属性</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#使用-position-布局的例子" class="sidebar-link">使用 position 布局的例子</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#float-属性" class="sidebar-link">float 属性</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#使用浮动布局的例子" class="sidebar-link">使用浮动布局的例子</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#百分比宽度及布局" class="sidebar-link">百分比宽度及布局</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#媒体查询" class="sidebar-link">媒体查询</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#inline-block-属性" class="sidebar-link">inline-block 属性</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#column-属性" class="sidebar-link">column 属性</a></li><li class="sidebar-sub-header"><a href="/front-end/css.html#flex-属性" class="sidebar-link">flex 属性</a></li></ul></li></ul></li><li><a href="/front-end/node.html" class="sidebar-link">Node.js深入浅出</a></li><li><a href="/front-end/design.html" class="sidebar-link">前端设计与可视化</a></li><li><a href="/front-end/npm.html" class="sidebar-link">npm常用命令</a></li><li><a href="/front-end/vuepress.html" class="sidebar-link">vuepress 基本配置</a></li><li><a href="/front-end/babel.html" class="sidebar-link">Babel详细学习</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-实战学习"><a href="#css-实战学习" class="header-anchor">#</a> css 实战学习</h1> <h2 id="文字相关"><a href="#文字相关" class="header-anchor">#</a> 文字相关</h2> <p>设置 logo 字体颜色</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token comment">/* 文字垂直居中, 如果div有指定height, 则保证line-height与其相同即可 */</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 31px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 31px<span class="token punctuation">;</span>
  <span class="token comment">/* 水平居中 */</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token comment">/* 文字颜色 */</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #faad14<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 16px 400px 16px 0<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token comment">/* 设置文字字体大小 */</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 26px<span class="token punctuation">;</span>
  <span class="token comment">/* 设置字磅 */</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token comment">/* 设置文字字间距 */</span>
  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
  <span class="token comment">/* 设置首行缩进2字符 */</span>
  <span class="token property">text-indent</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
  <span class="token comment">/* 文字字体 */</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">'Apple Color Emoji'</span><span class="token punctuation">,</span>
    <span class="token string">'PingFang SC'</span><span class="token punctuation">,</span> <span class="token string">'Hiragino Sans GB'</span><span class="token punctuation">,</span> <span class="token string">'Microsoft YaHei'</span><span class="token punctuation">,</span> <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span>
    Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>如果高度为百分比，<code>line-height</code>不知道设置具体的数值时，利用伪元素进行居中:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>son<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>这是要居中的文字<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.son</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.son::before</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="css-布局"><a href="#css-布局" class="header-anchor">#</a> css 布局</h2> <blockquote><p>大部分资源来源于<a href="http://zh.learnlayout.com/" target="_blank" rel="noopener noreferrer">学习 CSS 布局<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></blockquote> <h3 id="display-属性"><a href="#display-属性" class="header-anchor">#</a> display 属性</h3> <p><code>display</code> 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，大多数元素的默认值通常是 <code>block</code> 或 <code>inline</code> ，分别称之为<strong>块级元素</strong>和<strong>行内元素</strong>。</p> <p><strong>(1) block</strong><br> <code>div</code> 是一个标准的块级元素。<strong>一个块级元素会新开始一行并且尽可能撑满容器</strong>。其他常用的块级元素包括 <code>p</code> 、 <code>form</code> 和 HTML5 中的新元素： <code>header</code> 、 <code>footer</code> 、 <code>section</code> 等等。</p> <p><strong>(2) inline</strong><br> <code>span</code> 是一个标准的行内元素。一个行内元素可以在段落中 <code>&lt;span&gt; 像这样 &lt;/span&gt;</code> 包裹一些文字而不会打乱段落的布局。 <code>a</code> 元素是最常用的行内元素，它可以被用作链接。</p> <p><strong>(3) none</strong><br>
另一个常用的 display 值是 <code>none</code> 。一些特殊元素的默认 display 值是它，例如 script 。 <code>display:none</code> 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。</p> <div class="custom-block tip"><p class="custom-block-title">注意</p> <p>它和 <code>visibility</code> 属性不一样。把 <code>display</code> 设置成 <code>none</code> 元素不会占据它本来应该显示的空间，但是设置成 <code>visibility: hidden;</code> 还会占据空间。</p></div> <h3 id="margin-auto"><a href="#margin-auto" class="header-anchor">#</a> margin: auto</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#main</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>设置块级元素的 <code>width</code> 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 <code>auto</code> 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。唯一的<strong>问题</strong>是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面，一般采用<code>max-width</code> 替代 <code>width</code> 可以使浏览器更好地处理小窗口的情况。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#main</span> <span class="token punctuation">{</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="盒模型"><a href="#盒模型" class="header-anchor">#</a> 盒模型</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.simple</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.fancy</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：<strong>盒模型</strong>。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素，上述 css 代码实际渲染的情况如下图。</p> <p><img src="https://s1.ax1x.com/2020/04/06/GseQRs.png" alt="盒模型宽度"></p> <p>由于传统的盒子模型不直接，人们新增了名为 <code>box-sizing</code> 的 CSS 属性。当你设置一个元素为 <code>box-sizing: border-box;</code> 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 <code>box-sizing: border-box;</code></p> <p><img src="https://s1.ax1x.com/2020/04/06/GsmkY4.png" alt="采用box-sizing设置的盒子模型"></p> <p>为了让所有元素都这样表现，可以使用以下 css 代码：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">-moz-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">注意</p> <p><code>box-sizing</code> 是个很新的属性，目前你还应该像我上面例子中那样使用<code>-webkit-</code> 和 <code>-moz-</code> 前缀。这可以启用特定浏览器实验中的特性。</p></div> <h3 id="position-属性"><a href="#position-属性" class="header-anchor">#</a> position 属性</h3> <p>为了制作更多复杂的布局，我们需要讨论下 <code>position</code> 属性。</p> <p>(1) <code>static</code>，默认值。任意 <code>position: static;</code>的元素不会被特殊的定位。一个 <code>static</code> 元素表示它<strong>不会</strong>被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。</p> <p>(2) <code>relative</code>，相对定位<code>relative</code> 表现的和 <code>static</code> 一样，除非你添加了一些额外的属性。在一个相对定位（position 属性的值为<code>relative</code>）的元素上设置 <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 和 <code>left</code> 属性会使其偏离其正常位置。其他的元素的位置则<strong>不会弥补它偏离后剩下的空隙</strong>。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.relative1</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.relative2</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> -20px<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GsmvND.png" alt="relative定位示例"></p> <p>(3) <code>fixed</code>，固定定位（position 属性的值为 fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.fixed</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">注意</p> <p>一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。</p></div> <p>(4) <code>absolute</code>, 绝对定位<code>absolute</code> 是最棘手的 position 值。 <code>absolute</code> 与 <code>fixed</code> 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position 属性的值为 absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。<strong>“positioned”元素是指 position 值不是 static 的元素</strong>。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.relative</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.absolute</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/Gsn0Dx.png" alt="绝对定位示例"></p> <div class="custom-block warning"><p class="custom-block-title">关注</p> <ul><li><code>relative</code>相对定位，它是相对于它原本应该在的位置进行移动定位；</li> <li><code>absolute</code>绝对定位，它是相对于最近的设置了<code>position</code>值(不能为默认值<code>static</code>)的祖先元素，如果没有则相对于<code>body</code>元素进行定位。</li></ul></div> <h3 id="使用-position-布局的例子"><a href="#使用-position-布局的例子" class="header-anchor">#</a> 使用 position 布局的例子</h3> <p>这个例子在容器比 nav 元素高的时候可以正常工作。如果容器比 nav 元素低，那么 nav 会溢出到容器的外面。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">nav</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">section</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 默认属性为 static */</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">footer</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GsK9mt.png" alt="position布局案例"></p> <h3 id="float-属性"><a href="#float-属性" class="header-anchor">#</a> float 属性</h3> <p>另一个布局中常用的 CSS 属性是 <code>float</code> <code>float</code> 可用于实现文字环绕图片</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">img</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 0 1em 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GsMwKs.png" alt="文字环绕图片效果"></p> <p>clear 属性被用于控制浮动。使用 <code>clear: left;</code> 可以清除元素的向左浮动效果，使得它继续在文档流中。你还可以用 <code>right</code> 或 <code>both</code> 来清除向右浮动或同时清除向左向右浮动。</p> <p>如果浮动的元素(例如图片)比包含它的元素还高，而且它是浮动的，那么它就会溢出到容器外面！</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>elem<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/ilta.png<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>An Image<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    不......这个图片比包含它的元素还高，
    而且它是浮动的，于是它就溢出到了容器外面！
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GsQffS.png" alt="浮动的溢出错误"><br>
可以采用<code>清除浮动技巧</code>(clearfix hack),在外层 div 中加入样式即可解决问题。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.clearfix</span> <span class="token punctuation">{</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">注意</p> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow" target="_blank" rel="noopener noreferrer">overflow 属性详解<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <code>overflow</code> 定义当一个元素的内容太大而无法适应 <code>块级格式化上下文</code> 时候该做什么。它是 <code>overflow-x</code> 和 <code>overflow-y</code> 的简写，可设置的值有<code>visible</code>(内容不会被修剪)、<code>hidden</code>(不显示滚动条)、<code>scroll</code>(始终显示滚动条) 和 <code>auto</code>(必要时显示滚动条)。<br>
为使 <code>overflow</code> 有效果，块级容器必须有一个指定的高度（<code>height</code>或者 <code>max-height</code>）或者将 <code>white-space</code> 设置为 <code>nowrap</code>。</p></div> <h3 id="使用浮动布局的例子"><a href="#使用浮动布局的例子" class="header-anchor">#</a> 使用浮动布局的例子</h3> <p>完全使用 float 来实现页面的布局是很常见的。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">nav</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">section</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/Gsaodg.png" alt="浮动实现布局"></p> <h3 id="百分比宽度及布局"><a href="#百分比宽度及布局" class="header-anchor">#</a> 百分比宽度及布局</h3> <p>百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的 50%。还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">article img</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时 <code>nav</code> 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">nav</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">section</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GsdsXV.png" alt="使用百分比宽度进行布局实例"></p> <h3 id="媒体查询"><a href="#媒体查询" class="header-anchor">#</a> 媒体查询</h3> <p>“响应式设计(Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！</p> <p>媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">nav</span> <span class="token punctuation">{</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">section</span> <span class="token punctuation">{</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 599px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">nav li</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="inline-block-属性"><a href="#inline-block-属性" class="header-anchor">#</a> inline-block 属性</h3> <p>你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 <code>float</code> 是一种选择，但是使用 <code>inline-block</code>(行内块) 会更简单。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.after-box</span> <span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GswUu6.png" alt="使用float创建网格"></p> <p>也可以用 <code>display</code> 属性的值 <code>inline-block</code> 来实现相同效果。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>可以使用 inline-block 来布局，但是：</p> <ul><li><code>vertical-align</code> 属性会影响到 <code>inline-block</code> 元素，你可能需要将它的值设置为 <code>top</code> ;</li> <li>你需要设置每一列的宽度;</li> <li>如果 HTML 源代码中元素之间有空格，那么列与列之间会产生空隙.</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">nav</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.column</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GswoCj.png" alt="使用行内块布局示例"></p> <h3 id="column-属性"><a href="#column-属性" class="header-anchor">#</a> column 属性</h3> <p>文字的多列布局:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.three-column</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
  <span class="token property">-moz-column-count</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
  <span class="token property">-moz-column-gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
  <span class="token property">-webkit-column-count</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
  <span class="token property">-webkit-column-gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
  <span class="token property">column-count</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
  <span class="token property">column-gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/GswjVU.png" alt="文字多列布局实例"></p> <div class="custom-block tip"><p class="custom-block-title">注意</p> <p>columns 是很新的标准，所以你需要使用前缀，并且它不被 IE9 及以下和 Opera Mini 支持。</p></div> <h3 id="flex-属性"><a href="#flex-属性" class="header-anchor">#</a> flex 属性</h3> <p>新的 flexbox 布局模式被用来重新定义 CSS 中的布局方式。使用 Flexbox 的居中布局示例代码:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.vertical-container</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-flex<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">-webkit-align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">-webkit-justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://s1.ax1x.com/2020/04/06/Gs0tiQ.png" alt="flex垂直居中布局"></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新于:</span> <span class="time">8/7/2021, 12:01:15 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/front-end/es6.html" class="prev">
        深入理解ES6
      </a></span> <span class="next"><a href="/front-end/node.html">
        Node.js深入浅出
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.adf242e6.js" defer></script><script src="/assets/js/2.8cf67c90.js" defer></script><script src="/assets/js/16.131aa977.js" defer></script>
  </body>
</html>
